﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
    <link rel="stylesheet" th:href="@{/css/weui.css}" />
    <link rel="stylesheet" th:href="@{/css/weui2.css}" />
    <link rel="stylesheet" th:href="@{/css/weui3.css}" />
        <link rel="stylesheet" th:href="@{/css/mc_common.css}"/>
    <link rel="stylesheet" th:href="@{/css/selectTickets.css}"/>
</head>
<body>
	<div data-role="page" class="page" id="selectTickets_page" data-dom-cache="false">
    <!--列表-->
    <div class="weui_panel weui_panel_access">
        <div class="weui_panel_bd">
            <a href="detail.html" class="weui_media_box weui_media_appmsg">
                <div class="weui_media_hd">
                    <img class="weui_media_appmsg_thumb" th:src="${order.playImage}" />
                </div>
                <div class="weui_media_bd">
                    <h4 class="weui_media_title" th:text="${order.playName}"></h4>
                    <p class="weui_media_desc f-red"><i class="icon icon-51"></i> <span th:text="${order.playDate}"></span></p>
                    <p class="weui_media_desc"><i class="icon icon-46"></i> 长沙红太阳</p>
                </div>
            </a>
        </div>
    </div>

    <div class="weui_cells">
        <div class="weui_cells_title" th:text="${'购买数量 （'+order.quantity+'张）'}"></div>
        <div class="weui_cell" th:each="seat : ${order.seats}">
            <div class="weui_cell_hd"><div class="c2"></div></div>
            <div class="weui_cell_bd weui_cell_primary">
                <p th:text="${seat.name}"></p>
            </div>
            <div class="weui_cell_ft" th:text="${'¥'+seat.price}"></div>
        </div>
    </div>
    <div class="weui_cells weui_cells_form" id="selectTickets_page_main" data-role="main">
        <div class="weui_cells_title">配送方式 <label class="weui-label-s">自取</label></div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">真实姓名</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" id="uname" placeholder="请输入姓名" type="text" required="required" maxlength="20">
            </div>
            <div class="weui_cell_ft">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">手机号码</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" id="phone" type="tel" required pattern="[0-9]{11}" maxlength="11" placeholder="输入你现在的手机号" emptytips="请输入手机号" notmatchtips="请输入正确的手机号">
            </div>
            <div class="weui_cell_ft">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">取票地址</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>长沙市天心区劳动西路347号田汉大剧院</p>
            </div>
        </div>
    </div>
    <div class="weui_cells_title">温馨提示：因演出票唯一性、时效性，不支持退换票服务；请本人当面确认纸质票完好无损，当面验收。</div>

    <div class="weui-flex">
        <div class="weui-flex-item order_l_bt" style="max-width: 70%; ">应付总金额：<span class="f-red" th:text="${'¥'+order.payAmount}"></span></div>
        <div class="weui-flex-item" style="max-width: 30%;"><a href="javascript:;" id="pay" class="weui_btn weui_btn_warn noradius">支付</a></div>
    </div>
    </div>
      <!--页面私有引用-->
    <script th:src="@{/js/zepto.min.js}"></script>
    <script th:src="@{/js/jquery/mc_common.js}"></script>
    <!--页面私有引用-->
    <script th:inline="javascript">
    	$(function(){
    		var orderId = [[${order.orderId}]];
    		var uname = $('#uname');
    		var phone = $('#phone');
    		$('#pay').on('click',function(e){
    			var me = $(this);
    			if(me.text() !== '支付'){
                    return;
                }
    			if(uname.val().replace(/^\s+|\s+$/ig,'').length == ''){
    				CommonFun.popMsg("selectTickets_page", "姓名不能为空");
                    uname.focus();
    				return;
    			}
    			if(phone.val().replace(/^\s+|\s+$/ig,'').length == ''){
    				CommonFun.popMsg("selectTickets_page", "手机号不能为空");
                    phone.focus();
    				return;
    			}
                if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone.val()))){
                    CommonFun.popMsg("selectTickets_page", "手机号格式有误");
                    phone.focus();
                    return;
                }
    			me.text('正在支付..');
                $.ajax({
                    type: "POST",
                    url: "/wechat/pay",
                    data: {orderId:orderId,uname:uname.val(),phone:phone.val()},
                    complete : function(XHR, TS){
                        var response = {code : -1,msg:'system error'};
                        try{
                            response = JSON.parse(XHR.responseText);
                        }catch(e){;}
                        if(response.code === 0){
                            WeixinJSBridge.invoke('getBrandWCPayRequest',response.data,function(res){
                                if(res.err_msg == 'get_brand_wcpay_request:ok'){
                                     CommonFun.popMsg("selectTickets_page", '支付成功！');
                                } else if (res.err_msg == 'get_brand_wcpay_request:fail'){
                                     CommonFun.popMsg("selectTickets_page", '支付出现问题，请稍后再试！');
                                } else if (res.err_msg == 'get_brand_wcpay_request:cancel'){
                                     CommonFun.popMsg("selectTickets_page",'已取消支付，请重新支付！');
                                } else {
                                     CommonFun.popMsg("selectTickets_page", '支付被拒绝了');
                                }
                                location.href = '/wechat/payment/' + orderId;
                            });
                        }else{
                            me.text('支付');
                            CommonFun.popMsg("selectTickets_page", response.msg);
                        }
                    }
                });
    		});
    	})
    </script>

</body>
</html>
